// 自定义指令
import Vue from 'vue'
import store from '@/store'

Vue.directive('imgerror', {
  // inserted当被绑定的元素插入到 DOM 中时……
  inserted: function(el, { value }) {
    // 如果图片是空，替换图片的src属性
    if (!el.src) {
      el.src = value
    }
    // el 指令所在dom元素
    // bindings 里面是指令的参数信息对象 里面的value就是指令=右边的值，可以直接解构出value
    // 等图片加载失败，然后替换图片的src属性
    el.onerror = function() {
      el.src = value
    }
  },
  // DOM更新时会触发  所在组件的 VNode 更新时调用
  update: function(el, { value }) {
    // 如果图片是空，替换图片的src属性
    if (!el.src) {
      el.src = value
    }
    // el 指令所在dom元素
    // bindings 里面是指令的参数信息对象 里面的value就是指令=右边的值，可以直接解构出value
    // 等图片加载失败，然后替换图片的src属性
    el.onerror = function() {
      el.src = value
    }
  }
})

// 自定义指令控制按钮级别权限 或者使用挂载到vue原型上的方法
Vue.directive('check', {
  inserted: function(el, bindings) {
    // 找到用户拥有的按钮权限
    const point = store.state.user.userInfo.roles.points
    // 循环用户按钮权限，和使用这个指令，传递过来的值进行比较，找到了就是有这个权限，就什么都不做，显示这个按钮，没找到就是没有这个权限，直接把这个按钮删除
    const has = point.some(item => item.toLowerCase() === bindings.value.toLowerCase()) // 只要有一个true就返回true
    // 如果没有这个权限
    if (!has) {
      // 直接删除自身
      el.remove()
      // 不能使用样式让按钮隐藏，懂行的可以f12里面修改 el.style.display = 'none'
    }
    // 有这个权限，什么都不用做
  }
})
